<template>
  <div class="login-container">
    <div class="container">
      <h2 class="title">xxxx管理系统</h2>
      <br>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        native-type="submit"
      >
        <el-form-item label="" prop="name">
          <el-input v-model="ruleForm.name" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="" prop="passworld">
          <el-input
            type="password"
            v-model="ruleForm.passworld"
            placeholder="密码"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登陆</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        passworld: "123456",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        passworld: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      masterRoutes: [
        { path: "/home", name: "home", meta: { title: "home" } },
        { path: "/system", name: "system", meta: { title: "系统管理" } },
        { path: "/table", name: "table", meta: { title: "列表" } },
        { path: "/from", name: "from", meta: { title: "表单" } },
      ],
      userRoutes: [
        { path: "/home", name: "home", meta: { title: "home" } },
        { path: "/system", name: "system", meta: { title: "系统管理" } },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let userInfo = {
            name:this.ruleForm.name
          }
          // 用户信息
          localStorage.setItem('userInfo',JSON.stringify(userInfo))
            // 根据登录信息模拟不用的用户权限
          if(this.ruleForm.name ==='admin'){
            // 管理员
             localStorage.setItem("userRoles", JSON.stringify(this.masterRoutes));
          }else{
            // 普通用户
            localStorage.setItem("userRoles", JSON.stringify(this.userRoutes));
          }
          this.$router.push("/");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang='less'>
.login-container {
  .title {
    text-align: center;
  }
  .container {
    width: 420px;
    margin: 20vh auto 0 auto;
    padding: 80px 60px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  ::v-deep .el-button--primary {
    width: 100%;
  }
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
